<template>
	<view>
		<!-- 搜索框 -->
		<view class="search-input">
			<input v-model="tagName" class="uni-input" placeholder-class="icon iconfont icon-icon- topic-search" @input="loadHotTags" placeholder="搜索热门标签" />
		</view>

		<view class="tag-list">
			<block v-for="(tag, index) in tagInfo" :key="index">
				<view class="tag-list-item" @tap="toPage(tag)">
					<view class="tag-info">
						<view class="tag-img"><image-cache :imgSrc="tag.tagPic" mode="widthFix"></image-cache></view>
						<view class="tag-msg">
							<text class="tag-name">#{{ tag.tagName }}</text>
							<view class="">{{ tag.num }}人发表</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';
import imageCache from '../../components/image-cache/image-cache.vue';
export default {
	components:{
		imageCache
	},
	data() {
		return {
			pageTitle: '',
			pageType: 0,
			tagName: '',
			tagInfo: []
		};
	},
	methods: {
		...mapMutations(['setSelectTag']),
		toPage(tag) {
			this.setSelectTag(tag);
			uni.navigateTo({
				url: '../tag-info-list/tag-info-list'
			});
		},
		loadHotTags() {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.hotTags,
				header: constant.authHead(),
				data: {
					tagName: this.tagName,
					type: this.pageType
				},
				method: 'GET',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						this.tagInfo = res.data.data;
					} else {
						showToast(res.data.msg);
					}
				},
				fail: r => {
					console.log(r);
				}
			});
		}
	},
	onLoad(options) {
		this.pageType = options.type;
		this.pageTitle = options.pageTitle;
		this.loadHotTags();
	},
	onReady() {
		uni.setNavigationBarTitle({
			title: this.pageTitle
		});
	}
};
</script>

<style lang="less" scoped>
.search-input {
	.icon-icon-:before {
		font-size: 34rpx;
	}
	.topic-search {
		text-align: center;
		font-size: 28rpx;
	}
	input {
		margin: 20rpx 40rpx;
		border-radius: 20rpx;
		background-color: #f4f4f4;
		text-align: center;
	}
}

.tag-list {
	margin-top: 35rpx;
	padding: 0 40rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: center;

	.tag-list-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0 20rpx 10rpx;

		.tag-info {
			display: flex;
			flex-direction: row;
		}

		.tag-img {
			width: 170rpx;
			height: 170rpx;
			margin-right: 20rpx;
			image {
				width: 100%;
				border-radius: 20rpx;
			}
		}
		.tag-msg {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 140rpx;
			.tag-name {
				font-size: 30rpx;
				font-weight: 600;
			}
			& > view:last-child {
				font-size: 24rpx;
				color: #cdcdcd;
			}
		}
	}
}
</style>
